
<template>
  <view class="tenantreserve">
    <div class="banner">
      <img :src="banner" alt="" srcset="">
    </div>
    <!-- <div class="reserve-list"> -->
    <scroll-view
      class="reserve-list"
      scroll-y="true"
      @scrolltolower="_onLoadmore"
      :refresher-enabled="refresherEnabled"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="triggered = false"
      @refresherabort="triggered = false"
    >
      <div class="list-item" v-for="(item,index) in reserveList" :key="index">
        <div class="rightText">
          <div class="text-top">
            {{item.outtype == 0 ? '合租' : '整租'}}-{{item.communityname}}
          </div>
          <div class="time">
            <span>预约日期：</span>
            {{item.riqi}}
          </div>
          <div class="time">
            <span>预约时段：</span>
            {{item.starttime}}~{{item.endtime}}
          </div>
          <div class="btn">
            <div class="tet">预约状态：</div>
            <div class="status">
              <img :src="statusImages[item.state]" alt="" srcset="">
            </div>
          </div>
          <div :class="['opendoor',item.state == 1 ? '':'hui']" @click="opendoorPupop(item)">开门</div>
        </div>
      </div>
      <div v-if="isnone < 1" class="none">
        <img v-if="baseUrl" :src="baseUrl+'imgs/imgs/none.png'" alt="">
      </div>
    </scroll-view>
    <!-- 单个开门加获取密码 -->
    <uni-popup ref="popup1" type="center">
      <div class="popup-content">
        <div class="con-head">{{openInfo.address}}</div>
        <div class="con-img">
          <img @click="openDoorOne()" v-if="baseUrl" :src="baseUrl+'opendoor/opendoor.gif'" alt="">
        </div>
        <div class="con-btn">
          <button type="submit" @click="closePupop(1)">关闭</button>
        </div>
        <div class="getpassword" @click="getPasswordOne()">
          <div>获取</div>
          <div>密码</div>
        </div>
      </div>
    </uni-popup>
    <!-- 开锁成功 -->
    <uni-popup ref="popup2" type="center">
      <div class="open-success">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/success.png'" alt="">
        <div class="text1">开锁成功</div>
        <div class="text2">开锁成功请开门</div>
        <button type="submit" @click="closePupop(2)">确定</button>
      </div>
    </uni-popup>
    <!-- 获取密码成功 -->
    <uni-popup ref="popup3" type="center">
      <div class="mima-success">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/success.png'" alt="">
        <div class="text1">{{password}}</div>
        <div class="text2">请输完密码后请按门锁右下角的“#”开门 温馨提示：本密码使用一次后失效</div>
        <button class="btn1" type="submit" @click="closePupop(3)">确定</button>
        <!-- <button class="btn2" type="submit">密码无法开门请点我</button> -->
      </div>
    </uni-popup>
    <!-- 提醒打开蓝牙 -->
    <uni-popup ref="popup4" type="center">
      <div class="lanya">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/jg.png'" alt="">
        <div class="text1 text">请打开蓝牙</div>
        <div class="text">并按门锁任意键激活</div>
        <button class="btn1" type="submit" @click="closePupop(4)">确定</button>
      </div>
    </uni-popup>
    <!-- 两个开门按钮 -->
    <uni-popup ref="popup5" type="center">
      <div class="lockall">
        <div class="con-head">{{openInfo.communityname}}
           <img @click="closePupop(5)" v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="con-btn">
          <img class="openB" @click="openDoor(0)" v-if="baseUrl" :src="baseUrl+'tenant/home/openBig.png'">
          <img class="openS" @click="openDoor(1)" v-if="baseUrl" :src="baseUrl+'tenant/home/openSmail.png'">
        </div>
        <div class="getpassword" @click="gotocheck">
          获取密码
        </div>
      </div>
    </uni-popup>
    <!-- 选择密码 -->
    <uni-popup ref="popup6" type="center">
      <div class="popup1">
        <div class="con-head">
          选择密码
          <img @click="closePupop(6)" v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="btn1" @click="getpassword(0)">大门密码</div>
        <div class="btn2" @click="getpassword(1)">房间密码</div>
      </div>
    </uni-popup>
    <!-- 提醒初级用户 -->
    <uni-popup ref="popup7" type="center">
      <div class="lanya2">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/jg.png'" alt="">
        <div class="text text1">您的房间为初级用户，无法开门。如需开门服务，请联系房东开通高级用户服务</div>
        <button class="btn1" type="submit" @click="closePupop(7)">确定</button>
      </div>
    </uni-popup>
  </view>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
const banner = imgUrl+'order/banner.png'
const reserve = imgUrl+'tenant/reserve.png'
const reserved = imgUrl+'tenant/reserved.png'
const reserveing = imgUrl+'tenant/reserveing.png'
import { GetList } from '@/apis/tenant/reserve'
import { getLockPassword ,openDoorSave} from '@/apis/opendoor'
var smartLock = requirePlugin("smartLock")
import { bluetooth_lock } from '@utils/lockConfig'
export default {
  data() {
    return {
      refresherEnabled: true,
      triggered:false,
      banner,
      statusImages: [
        reserve,
        reserveing,
        reserved
      ],
      reserveList: [
      ],
      limit: 10,
      offset: 1,
      openInfo:{
        communityname:''
      },
      password: 0
    }
  },
  created(){
    this.offset = 1
    this.GetList()
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    },
    isnone(){
      if(this.reserveList){
        return this.reserveList.length
       }else{
         return false
       }
    }
  },
  methods: {
    opendoorPupop(item){
      if(item.state == 1){
        this.openInfo = item
        if(item.biglocknumber && item.locknumber){
          this.$refs.popup5.open()
        }else{
          this.$refs.popup1.open()
        }
      }else if(item.state == 2){
        uni.showToast({
          title: '已过预约时间',
          icon: 'none'
        })
      }else{
        uni.showToast({
          title: '未到预约时间',
          icon: 'none'
        })
      }
    },
    openDoorOne(){
      this.closePupop(1)
      if(this.openInfo.biglocknumber){
        this.openDoor(0)
      }else if(this.openInfo.locknumber){
        this.openDoor(1)
      }else{
        uni.showToast({
          title: '房门都未绑定门锁！',
          icon: 'error'
        })
      }
    },
    getPasswordOne(){
      this.closePupop(1)
      if(this.openInfo.biglocknumber){
        this.getPassword(0)
      }else if(this.openInfo.locknumber){
        this.getPassword(1)
      }else{
        uni.showToast({
          title: '房门都未绑定门锁！',
          icon: 'error'
        })
      }
    },
    openDoor(int){
      let that = this
      let isflag = this.isfictitious(int)
      if(isflag) return
      smartLock.initSmartLock(bluetooth_lock.appid, bluetooth_lock.appkey, bluetooth_lock.user, bluetooth_lock.password, (res) => {
        // let id = item.houseid;//房源ID
        let tLockId = int ? that.openInfo.locknumber : that.openInfo.biglocknumber//设备号
        // this.data.unlock_number = unlocknumber;
        console.log(900000,int,tLockId)
        if (res.data.result === 0) {
          // 检测开门权限
          //需要initSmartLockPlus回调成功后才有效调用开锁接口
          smartLock.openCloseBleLock(tLockId, 1, function(res) {
            console.log("smartLock openCloseBleLock result: " + JSON.stringify(res.data))
            that.closePupop(5)
            if (res.data.result == 0) {
              that.$refs.popup2.open()
              that.openDoorSave(1,int)
            } else {
              that.$refs.popup4.open()
              that.openDoorSave(0,int)
            }
          })
            
        }
      })
    },
    openDoorSave(int,type){
      let data = {
        "houseid": this.openInfo.houseid,
        "houseroomid": this.openInfo.houseroomid,
        "state": int,
        "userid": this.userid,
        "type": type
      }
      openDoorSave(data).then(res=>{
        console.log('set open door info',res)
      })
    },
    gotocheck(){
      this.closePupop(5)
      this.$refs.popup6.open()
    },
    closePupop(id){
      switch (id) {
        case 2:
          this.$refs.popup2.close()
          break;
        case 3:
          this.$refs.popup3.close()
          break;
        case 4:
          this.$refs.popup4.close()
          break;
        case 5:
          this.$refs.popup5.close()
          break;
        case 6:
          this.$refs.popup6.close()
          break;
        case 7:
          this.$refs.popup7.close()
          break;
      }
    },
    isfictitious(int){
      let isflag = int ? this.openInfo.roomisfictitious : this.openInfo.bigisfictitious
      if(isflag){
        this.$refs.popup7.open()
        this.$refs.popup1.close()
        this.$refs.popup5.close()
        this.$refs.popup6.close()
        return true
      }else{
        return false
      }
    },
    getPassword(int){
      let that = this
      let isflag = this.isfictitious(int)
      if(isflag) return
      const data = {
        locknumber: int ? this.openInfo.locknumber : this.openInfo.biglocknumber
      }
      getLockPassword(data).then(res =>{
        if(res.code == 200){
          that.password = res.data
          that.$refs.popup3.open()
          that.closePupop(1)
          this.closePupop(6)
        }else{
          that.closePupop(1)
        }
      })
    },
    GetList(){
      let data = {
        limit: this.limit+"",
        offset: this.offset+"",
        userid: this.userid
      }
      GetList(data).then(res=>{
        console.log('res',res)
        
        if(res.code == 200){
          if (this.offset === 1) {
            this.reserveList = res.data
          }else if(this.reserveList.length >= res.total){
            return
          } else {
            this.reserveList = this.reserveList.concat(res.data)
          }
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    _onLoadmore(){
      ++this.offset
      this.GetList()
    },
    onRefresh(){
      this.offset = 1
      this.GetList()
      this.triggered = 'restore'
      setTimeout(() => {
        this.triggered = false
      }, 1000)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.tenantreserve{
  // @include num();
  flex: 1;
  // min-height: calc(100vh - 50px);
  background: #fff;
  display: flex;
  flex-direction: column;
  .banner{
    width: 100vw;
    height: 120px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .reserve-list{
    flex: 1;
    // background: #fff;
    overflow-y: auto;
    .list-item{
      box-sizing: border-box;
      padding: 15px;
      border-bottom: 2px solid #EFEFEF;
    }
    .rightText{
      position: relative;
      .text-top{
        // height: 44px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
      }
      .time{
        margin-top: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4A4A4A;
        line-height: 20px;
        span{
          color: #9B9B9B;
        }
      }
      .btn{
        margin-top: 4px;
        display: flex;
        .tet{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
          line-height: 20px;
        }
        .status{
          width: 104px;
          height: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .opendoor{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 50px;
        background: #FFAA58;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 50px;
        text-align: center;
      }
      .hui{
        background: rgba(130, 130, 130, 0.2);
      }
    }
  }
  .none{
    width: 100vw;
    margin-top: 50px;
    // background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img{
      width: 190px;
      height: 195px;
    }
  }
}
.popup-content{
  width: 335px;
  height: 415px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  .con-head{
    width: 100%;
    height: 60px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 60px;
    text-align: center;
    border-bottom: 2px solid #EFEFEF;
  }
  .con-img{
    margin: 19px 0 80px 0;
    img{
      width: 189px;
      height: 189px;
    }
  }
  .con-btn{
    button{
      width: 305px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      border-radius: 100px;
    }
    button::after{
      border: 0;
    }
  }
  .getpassword{
    position: absolute;
    right: 15px;
    bottom: 95px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(137deg, #25F28A 0%, #0DBF65 100%);
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    line-height: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.open-success{
  width: 335px;
  height: 373px;
  background: #27C58D;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    margin-top: 44px;
    width: 259px;
    height: 137px;
  }
  .text1{
    height: 53px;
    font-size: 38px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 53px;
    margin: 15px 0 6px 0;
    text-align: center;
  }
  .text2{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
  }
  button{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  button::after{
    border: 0;
  }
}
.mima-success{
  width: 335px;
  height: 467px;
  background: #27C58D;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 259px;
    height: 137px;
  }
  .text1{
    height: 67px;
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 67px;
    text-align: center;
    margin: 24px 0 9px 0;
  }
  .text2{
    width: 283px;
    height: 44px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
  }
  .btn1{
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
    margin: 24px 0 10px 0;
  }
  .btn2{
    width: 305px;
    height: 45px;
    border-radius: 100px;
    border: 1px solid #FFFFFF;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    background-color: #27C58D;
  }
  button::after{
    border: 0;
  }
}
.lanya{
  width: 335px;
  height: 373px;
  background: #D84243;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 117px;
    height: 115px;
  }
  .text{
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
  }
  .text1{
    margin-top: 38px;
  }
  .btn1{
    margin-top: 31px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
}
.lanya2{
  width: 335px;
  height: 373px;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 117px;
    height: 115px;
  }
  .text{
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4a4a4a;
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
    
  }
  .text1{
    margin-top: 38px;
  }
  .btn1{
    margin-top: 31px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  .btn1::after{
    border: 0;
  }
}
.popup1{
  width: 335px;
  height: 212px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  .con-head{
    width: 100%;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 25px;
    position: relative;
    box-sizing: border-box;
    padding: 18px 0;
    text-align: center;
    border-bottom: 1px solid #EFEFEF;
    img{
      position: absolute;
      right: 15px;
      width: 18px;
      height: 18px;
    }
  }
  .btn1{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  .btn2{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(140deg, #FFCF58 0%, #FFD758 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
}
.lockall{
  width: 335px;
  // height: 415px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  padding-bottom: 22px;
  .con-head{
    width: 100%;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 25px;
    position: relative;
    box-sizing: border-box;
    padding: 18px 0;
    text-align: center;
    border-bottom: 1px solid #EFEFEF;
    img{
      position: absolute;
      right: 15px;
      top: 22px;
      width: 18px;
      height: 18px;
    }
  }
  .con-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    .openB{
      width: 169px;
      height: 169px;
    }
    .openS{
      width: 149px;
      height: 149px;
    }
  }
  .getpassword{
    margin-bottom: 20px;
    width: 104px;
    height: 40px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
  }
}
</style>
